.track {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 1rem;

    padding: .5rem;
    padding-left: 1rem;

    border-bottom: 1px solid var(--border-color);

    &-image {

        display: grid;

        img {
            width: 30px;
            min-width: 30px;
            height: 30px;
            object-fit: cover;
            // border-radius: 50%;
            border-radius: 15px;
            box-shadow: 0 2px 4px rgb(0 0 0 / 6%);
        }
    }

    &-details {
        flex-grow: 1;
        // white-space: nowrap;
        // overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        overflow-y: auto;

        h3 {
            font-size: 1rem;
            margin: 0px;
        }

        p {
            margin: 0px;
            font-size: .9rem;
            opacity: 0.8;
        }
    }

    &-duration {
        // font-size: 12px;

    }

    &-features {}

    &-actions {
        font-size: 1.5rem;

        i {
            font-size: 2rem;
        }

        >div {
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: grid;
            place-content: center;
        }
    }

    &.active {
        background-color: var(--accent-color); //rgb(255 255 255 / 6%);

        color: white !important;

        box-shadow: 1px 2px 18px rgba(0, 0, 0, 0.1);

        // backdrop-filter: blur(10px);
    }

    &:hover {
        cursor: pointer;
    }
}